<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="600px"
    customClass="mes_dialog"
    v-dialogDrag
    :close-on-click-modal="false">
    <div class="error_check">
      <div class="step_msg">
        <i class="iconfont icon-xiaoxitishi"></i>
        <span class="step_msg_txt">{{title}}失败，请根据以下提示进行修改后再{{title}}</span>
      </div>
      <div class="err_msg">
        <el-table :data="errData" :show-header="false" border max-height="350">
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column style="height: 20px" show-overflow-tooltip
                           :resizable="false">
            <template slot-scope="scope">{{scope.row}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="err_file">
        <span @click="downloadError" class="err_file_btn">
          <i class="iconfont icon-btn_download"></i>下载错误文档
        </span>
        <span class="err_file_msg">查看更多信息，请下载错误文档</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
/**
 * @author liubaohui
 */
export default {
  name: 'ErrorCheck',
  props: {
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      // 错误数据
      errData: [],
      dialogVisible: false
    }
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false
    },
    openDialog(errMessages) {
      this.errData = errMessages
      this.dialogVisible = true
    },
    // 下载错误文档
    downloadError() {
      if (this.errData && this.errData.length) {
        this.$downloadErrorFile(`${this.title}错误信息.txt`, this.errData.join('\r\n'))
      }
    }
  }
}
</script>

<style lang="less">
  .error_check {
    .el-table td {
      padding: 0;
      height: 30px;
      line-height: 30px;
    }
    .el-table td:first-child .cell {
      padding: 0 5px;
    }
    .step_msg {
      color: @mesFontRed;
      font-size: 14px;
      margin-bottom: 20px;
      .icon-xiaoxitishi {
        font-size: 16px;
        margin-right: 3px;
      }
    }
    .err_file {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .err_file_btn {
        flex: 0 0 130px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #333;
        font-size: 14px;
        text-decoration: none;
        background-color: @mesBgWhite;
        border: @mesBorDefault;
        margin-right: 5px;
        cursor: pointer;
        .icon-btn_download {
          color: @mesIconDown;
          margin-right: 5px;
        }
      }
      .err_file_msg {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: @mesFontDefault;
        font-size: 14px;
      }
    }
  }
</style>
